import { Clock, SysInfo, Weather } from "./lib/components.jsx";
import { Style, Box, Background } from "./lib/styles.jsx";
import { setDateTime, setSysInfo } from "./src/actions.jsx";
import { getDateTime, getSysInfo, getWeather } from "./src/dispatchers.jsx";

export const className = Style;

export const initialState = {
	datetime: {
		hour: 88,
		minutes: 88,
		displayDate: "fetching data...",
		greeting: "fetching data...",
		username: "..."
	},
	sysinfo: {
		load: ["...", "...", "..."],
		cpu: ["...", "...", "..."],
		processes: ["...", "...", "...", "..."],
		memory: ["...", "...", "...", "..."]
	},
	weather: undefined
};

export const init = dispatch => {
	getDateTime(dispatch);
	getSysInfo(dispatch);
	getWeather(dispatch);
};

export const updateState = (event, previousState) => {
	switch (event.type) {
		case "SYSINFO": {
			const newState = setSysInfo(event.output);
			return { ...previousState, ...newState };
		}
		case "DATETIME": {
			const newState = setDateTime(event.output);
			return { ...previousState, ...newState };
		}
		case "WEATHER": {
			if (!event.data.weather) return previousState;
			return {
				...previousState,
				weather: {
					icon: event.data.weather[0].icon,
					description: event.data.weather[0].description,
					temp: event.data.main.temp,
					temp_felt: event.data.main.feels_like
				}
			};
		}
		default: {
			return previousState;
		}
	}
};

export const render = ({ datetime, sysinfo, weather }) => {
	return (
		<Box>
			<Clock datetime={datetime} />
			<Background>
				<Weather weather={weather} />
				<SysInfo sysinfo={sysinfo} />
			</Background>
		</Box>
	);
};
